المرشحات (Filters) في AngularJS: المفهوم، الأنواع، وآليات الاستخدام المتقدمة

تُعدّ المرشحات (Filters) أحد الركائز الأساسية في إطار العمل AngularJS، وهي توفر وسيلة فعالة لمعالجة وعرض البيانات داخل القوالب (Templates) بطريقة ديناميكية وبسيطة دون الحاجة إلى إجراء التعديلات على الكود البرمجي في وحدات التحكم (Controllers) أو الخدمات (Services). تساعد المرشحات المطورين على تطبيق تنسيقات مختلفة على البيانات المعروضة، مثل ترتيب العناصر، تحويل الأحرف، تحديد عدد المنازل العشرية، أو حتى تطبيق مرشحات مخصصة تلائم متطلبات المشروع.

يستعرض هذا المقال بشكل موسع مفهوم المرشحات في AngularJS، وآليات عملها، والمرشحات الجاهزة المدمجة في الإطار، كما يوضح طريقة إنشاء مرشحات مخصصة واستخدامها بشكل احترافي داخل التطبيقات.

تعريف المرشحات في AngularJS

المرشح هو دالة تأخذ مدخلاً (عادة من نوع String، Array أو Object) وتُرجع مخرجات معدّلة. يتم استخدام المرشحات غالبًا داخل التعبيرات في ملفات HTML، وذلك لتغيير شكل البيانات قبل عرضها للمستخدم. يمكن تطبيق المرشح مباشرة على البيانات باستخدام الرمز (|) المعروف باسم “بايب Pipe”، وهو ما يجعل استخدام المرشحات واضحًا وسهل القراءة.

مثال:

html
CopyEdit
<p>{{ اسم | uppercase }}p>

في هذا المثال، يتم تحويل المتغير اسم إلى أحرف كبيرة باستخدام مرشح uppercase.

طريقة عمل المرشحات في AngularJS

عند استخدام مرشح في تعبير داخل القالب (Template Expression)، تمر البيانات من خلال هذا المرشح قبل عرضها. يمكن تكديس عدة مرشحات على نفس التعبير، مما يسمح بتنفيذ سلسلة من التحويلات على نفس القيمة.

مثال:

html
CopyEdit
<p>{{ التاريخ | date:'dd/MM/yyyy' | uppercase }}p>

يتم أولاً تنسيق التاريخ وفق النمط المحدد، ثم تحويل الناتج إلى أحرف كبيرة.

أنواع المرشحات الجاهزة في AngularJS

يتضمن AngularJS مجموعة متنوعة من المرشحات المدمجة التي تلبي الاحتياجات الشائعة في تطوير الواجهات. فيما يلي أبرز هذه المرشحات:

1. مرشح currency

يُستخدم لعرض القيم المالية بصيغة العملة.

html
CopyEdit
<p>{{ 1500 | currency }}p>

الناتج: $1,500.00

يمكن أيضًا تحديد رمز العملة:

html
CopyEdit
<p>{{ 1500 | currency:'€' }}p>

الناتج: €1,500.00

2. مرشح date

يُستخدم لتنسيق التواريخ.

html
CopyEdit
<p>{{ اليوم | date:'fullDate' }}p>

الناتج: Monday, June 10, 2025

3. مرشح filter

يُستخدم لتصفية عناصر مصفوفة بناءً على شرط.

html
CopyEdit
<li ng-repeat="عنصر in العناصر | filter:'كلمة'">{{ عنصر }}li>

يعرض فقط العناصر التي تحتوي على كلمة “كلمة”.

4. مرشح json

يُستخدم لتحويل الكائنات إلى صيغة JSON لعرضها.

html
CopyEdit
<pre>{{ البيانات | json }}pre>

5. مرشح limitTo

يُستخدم لتحديد عدد العناصر التي سيتم عرضها من مصفوفة أو عدد الأحرف من سلسلة نصية.

html
CopyEdit
<p>{{ الجملة | limitTo:10 }}p>

6. مرشح lowercase

يحول النص إلى أحرف صغيرة.

html
CopyEdit
<p>{{ الاسم | lowercase }}p>

7. مرشح uppercase

يحول النص إلى أحرف كبيرة.

html
CopyEdit
<p>{{ الاسم | uppercase }}p>

8. مرشح number

يُستخدم لتنسيق الأرقام حسب عدد المنازل العشرية.

html
CopyEdit
<p>{{ 1234.567 | number:2 }}p>

9. مرشح orderBy

يُستخدم لترتيب العناصر في مصفوفة حسب خاصية معينة.

html
CopyEdit
<li ng-repeat="طالب in الطلاب | orderBy:'الاسم'">{{ طالب.الاسم }}li>

جدول يوضح مقارنة سريعة بين أشهر مرشحات AngularJS

إنشاء مرشحات مخصصة في AngularJS

بالرغم من تنوع المرشحات المدمجة، قد يحتاج المطورون في كثير من الأحيان إلى مرشحات خاصة لتلبية متطلبات محددة. يتيح AngularJS إنشاء مرشحات مخصصة باستخدام module.filter().

بنية إنشاء مرشح مخصص

javascript
CopyEdit
angular.module('تطبيقي').filter('اسمالمرشح', function() {
  return function(القيمة, وسيطات...) {
    // تعديل القيمة
    return القيمة_المعدلة;
  };
});

مثال: مرشح يعكس النصوص

javascript
CopyEdit
angular.module('تطبيقي').filter('عكس', function() {
  return function(النص) {
    if (!النص) return '';
    return النص.split('').reverse().join('');
  };
});

الاستخدام في HTML:

html
CopyEdit
<p>{{ 'AngularJS' | عكس }}p>

الناتج: SJralugnA

استخدام المرشحات داخل وحدات التحكم (Controllers)

في بعض الأحيان، يكون من المفيد تطبيق المرشح ليس فقط في القوالب ولكن أيضًا داخل الشيفرة الجافا سكريبتية لوحدات التحكم. يمكن تحقيق ذلك عن طريق حقن $filter في وحدة التحكم.

javascript
CopyEdit
angular.module('تطبيقي').controller('مثالCtrl', function($scope, $filter) {
  var الاسم = 'AngularJS';
  $scope.الاسم_المعكوس = $filter('عكس')(الاسم);
});

مزايا استخدام المرشحات

1. فصل المنطق عن العرض: تساعد المرشحات في إبقاء الكود نظيفًا ومفصولًا، حيث تُعالج البيانات عند العرض دون التأثير على نموذج البيانات نفسه.

2. قابلية إعادة الاستخدام: يمكن تطبيق نفس المرشح في أماكن متعددة داخل التطبيق.

3. سهولة الاختبار: نظرًا لأن المرشحات دوال مستقلة، يمكن اختبارها بسهولة بشكل منفصل.

4. مرونة التخصيص: يمكن تعديل مرشح أو إنشاء مرشحات مخصصة وفقًا لمتطلبات الواجهة أو قواعد العمل.

تحديات وقيود استخدام المرشحات

رغم فعالية المرشحات في تحسين واجهة العرض، إلا أن استخدامها المفرط أو غير المدروس قد يؤدي إلى بعض التحديات:

• أداء ضعيف: إذا تم استخدام مرشحات ضمن ng-repeat على بيانات كبيرة دون استخدام track by، فقد يؤدي ذلك إلى بطء الأداء.

• نقص الدعم في Angular الأحدث: في الإصدارات الأحدث من Angular (بدءًا من Angular 2)، تم استبدال نظام المرشحات بما يعرف بـ “Pipes”، ما يعني أن المرشحات كما في AngularJS لم تعد مستخدمة.

• عدم التفاعل مع الأحداث: المرشحات تُستخدم فقط لعرض البيانات، ولا يمكنها التفاعل مع الأحداث أو تغيير النموذج (Model).

نصائح للاستخدام الفعال للمرشحات

• استخدم المرشحات فقط لمعالجة البيانات الموجهة للعرض وليس للمنطق البرمجي الأساسي.

• تجنب استخدام مرشحات داخل تعابير معقدة تؤدي إلى إعادة التقييم المستمر.

• استخدم track by في ng-repeat لتقليل تكلفة الأداء.

• قم بتسمية المرشحات المخصصة بطريقة واضحة ومعبرة عن وظيفتها.

• في حالة بناء تطبيق كبير، فكّر في نقل بعض منطق التنسيق إلى الخدمات أو الفلاتر الخاصة.

الخلاصة

المرشحات في AngularJS تشكل عنصرًا جوهريًا في تحسين طريقة عرض البيانات للمستخدم بطريقة أنيقة وفعالة. من خلال توفير مجموعة مرشحات مدمجة ومرونة في إنشاء مرشحات مخصصة، تتيح AngularJS بيئة خصبة لتنظيم الواجهات وجعلها ديناميكية دون تعقيد الشيفرة. إن الاستخدام الذكي للمرشحات يسهم في بناء تطبيقات أكثر كفاءة من حيث الأداء وأسهل في الصيانة، شرط ألا تُستخدم كبديل عن منطق التطبيق الأساسي، بل كمكمل يعزز من تجربة المستخدم وجودة العرض.

المراجع:

1. AngularJS Official Documentation – Filters

2. Brad Green, Shyam Seshadri. “AngularJS: Up and Running.” O’Reilly Media, 2014.